<template>
  <div class="PhysicalReport" id="PhysicalReport" ref="PhysicalReport">
    <div style="padding: 10px; box-sizing: border-box">
      <div
        style="
          color: #000000;
          text-align: center;
          margin-bottom: 5px;
          font-size: 18px;
          font-weight: bold;
        "
      >
        体检报告
      </div>
      <div style="padding: 5px 0" ref="peopleInfo">
        <div style="display: flex; margin-bottom: 5px">
          <div style="flex: 1">姓名：{{ physicalObj.peName }}</div>
          <div style="flex: 1">性别：{{ physicalObj.peGenderCodeName }}</div>
          <div style="flex: 1">年龄：{{ physicalObj.peAge }}</div>
          <div style="flex: 2">身份证号：{{ physicalObj.idCardNum }}</div>
        </div>
        <!-- <div style="display: flex; margin-bottom: 5px">
          <div style="flex: 3">体检套餐：{{ physicalObj.itemNames }}</div>
          <div style="flex: 2">体检时间：{{ physicalObj.peDate }}</div>
        </div> -->
        <div style="display: flex; margin-bottom: 5px">
          <div style="flex: 1">联系电话：{{ physicalObj.pePhoneNum }}</div>
          <div style="flex: 2">住址：{{ physicalObj.liveAddress }}</div>
        </div>
        <div style="display: flex; margin-bottom: 5px">
          <div style="flex: 1">体检时间：{{ physicalObj.peDate }}</div>
          <div style="flex: 2">体检套餐：{{ physicalObj.itemNames }}</div>
        </div>

      </div>
      <table
        cellpadding="0"
        cellspacing="0"
        border="0"
        style="width: 100%;border: 1px solid #ccc;border-top: none"
        ref="result"
      >
        <tr v-for="(item, ind) in dataList" :key="ind">
          <table
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="width: 100%; border: 1px solid #ccc;border-bottom: none"
          >
            <tr>
              <th
                align="center"
                style="
                  border-bottom: 1px solid #ccc;
                  border-right: 1px solid #ccc;
                  line-height: 40px;
                  background-color: #f1f1f1;
                  box-sizing: border-box;
                "
                colspan="7"
              >
                {{ item.groupName }}
              </th>
            </tr>
            <tr>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 100px">子项名称</div>
              </th>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 70px;">检查结果</div>
              </th>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 100px">参考值</div>
              </th>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 100px">子项名称</div>
              </th>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 70px">检查结果</div>
              </th>
              <th
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                align="center"
              >
                <div style="width: 100px">参考值</div>
              </th>
            </tr>

            <tr v-for="(ind, i) in getLength(item.itemInfoList)" :key="ind">
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
              >
                <div style="width: 100px;word-break: break-all;">
                  {{ item.itemInfoList[2 * i].itemName }}
                </div>
              </td>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
              >
                <div style="width: 70px; text-align: center;word-break: break-all;">
                  {{ item.itemInfoList[2 * i].itemValue }}
                  <span v-if="item.itemInfoList[2 * i].abnormalType == '1'" style="color: red">↓</span>
                  <span v-if="item.itemInfoList[2 * i].abnormalType == '2'" style="color: red">↑</span>
                </div>
              </td>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                
              >
                <div style="width: 100px; text-align: center;word-break: break-all;" v-if="item.itemInfoList[2 * i]">
                  {{ item.itemInfoList[2 * i].listReferenceValue.normalRefLow }}
                  <span
                    v-if="
                      item.itemInfoList[2 * i].listReferenceValue.normalRefHigh
                    "
                    >~</span
                  >
                  {{
                    item.itemInfoList[2 * i].listReferenceValue.normalRefHigh
                  }}
                </div>
              </td>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
                
              >
                <div style="width: 100px;word-break: break-all;" v-if="item.itemInfoList[2 * i + 1]">
                  {{ item.itemInfoList[2 * i + 1].itemName }}
                </div>
              </td>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
              >
                <div style="width: 70px; text-align: center;word-break: break-all;" v-if="item.itemInfoList[2 * i + 1]">
                  {{ item.itemInfoList[2 * i + 1].itemValue }}
                  <span v-if="item.itemInfoList[2 * i + 1].abnormalType == '1'" style="color: red">↓</span>
                  <span v-if="item.itemInfoList[2 * i + 1].abnormalType == '2'" style="color: red">↑</span>
                </div>
              </td>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px;
                  font-size: 12px;
                  box-sizing: border-box;
                "
              >
                <div style="width: 100px; text-align: center;word-break: break-all;" v-if="item.itemInfoList[2 * i + 1]">
                  {{
                    item.itemInfoList[2 * i + 1].listReferenceValue.normalRefLow
                  }}
                  <span v-if="item.itemInfoList[2 * i + 1].listReferenceValue.normalRefHigh"> ~</span>
                  {{
                    item.itemInfoList[2 * i + 1].listReferenceValue
                      .normalRefHigh
                  }}
                </div>
              </td>
            </tr>
          </table>
        </tr>
        <tr>
          <table
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="width: 100%; border: #ccc 1px solid; border-bottom: none;border-top: none"
          >
            <tr>
              <th
                style="
                  border-right: 1px solid #ccc;
                  border-bottom: 1px solid #ccc;
                  line-height: 40px;
                "
                align="center"
              >
                检查所见
              </th>
            </tr>
            <tr>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px 5px;
                  font-size: 12px;
                "
              >
                <div v-for="(item, index) in summaryList" :key="item.itemValue">
                  <div>
                    {{index + 1}}、{{ item.itemName }}
                  </div>
                  <div style="text-indent: 20px">
                    {{ item.itemValue }}
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </tr>
        <tr>
          <table
            border="0"
            cellpadding="0"
            cellspacing="0"
            style="width: 100%; border: #ccc 1px solid;border-bottom: none;border-top: none"
          >
            <tr>
              <th
                style="
                  border-bottom: 1px solid #ccc;
                  border-right: 1px solid #ccc;
                  border-top: none;
                  line-height: 40px;
                "
                align="center"
              >
                汇总建议
              </th>
            </tr>
            <tr>
              <td
                style="
                  border: 1px solid #ccc;
                  border-top: 0;
                  border-left: 0;
                  padding: 5px 5px;
                  font-size: 12px;
                "
              >
                <p
                  v-html="physicalObj.guidance"
                  style="
                    margin: 0;
                    white-space: pre-line;
                    word-break: break-all;
                    word-wrap: break-word;
                    color: #595959;
                  "
                />
              </td>
            </tr>
          </table>
        </tr>
        <tr>
          <td>
            <div style="margin-top: 10px; color: #595959; font-size: 12px">
              <!-- 检验机构：{{config.hospitalName ||orgName}}  联系电话：{{config.printPhone || orgPhone}} -->
            </div>
          </td>
        </tr>
      </table>
    </div>
    <!-- <div style="position: fixed;bottom: -5px;font-size: 12px;text-align:center;width:100%;">该报告仅做体检参考，不作为医疗依据</div> -->
  </div>
</template>
<script>
export default {
  props: {
    physicalObj: {
      type: Object,
      default: () => {
        return {
          listLessPerecordItem: [],
          listPerecordItem: [],
        };
      },
    },
  },
  data() {
    return {
      summaryList: [],
    };
  },
  computed: {
    // dataList() {
    //   // console.log(this.physicalList.listLessPerecordItem, this.physicalList.listPerecordItem)

    //   return [...arr1, ...arr2];
    // },
  },
  mounted() {
    // console.log(this.dataList);
  },
  methods: {
    getLength(list) {
      return Math.ceil(list.length / 2);
    },
  },
  watch: {
    physicalObj: {
      handler(val) {
        let arr1 = [];
        let arr2 = [];
        if (this.physicalObj.listLessPerecordItem) {
          arr1 = this.physicalObj.listLessPerecordItem;
        }
        if (this.physicalObj.listPerecordItem) {
          arr2 = this.physicalObj.listPerecordItem;
        }
        this.summaryList = this.physicalObj.summary
          ? JSON.parse(this.physicalObj.summary)
          : [];
        this.dataList = [...arr1, ...arr2]
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.PhysicalReport {
  position: absolute;
  top: calc(100vh + 100px);
  left: 300px;
  background-color: #fff;
  width: 780px;
  z-index: 10;
}
</style>
